<template>
  <Map class="map" ref="mapRef"></Map>
  <div class="contain" v-if="ishow">
    <ComForm ref="formRef" :format="format" @submit="submit" @reset="reset">
      <template #closeBtn>
        <el-button type="danger" text @click="close"> 关闭 </el-button>
      </template></ComForm
    >
    <ComTable
      ref="tableRef"
      :header-row-style="{
        backgroundColor: '#337ecc !important',
      }"
      :header-cell-style="{
        backgroundColor: '#337ecc !important',
        color: '#fff !important',
      }"
      :row-style="
        ({ row, rowIndex }) =>
          rowIndex % 2 == 1
            ? { backgroundColor: '#F4F5F7 !important' }
            : { backgroundColor: '#fff !important' }
      "
      :column="column"
      :api="getClearTask"
      :where="where"
      :isSelection="true"
      @del="del"
      @edit="edit"
      @clone="clone"
    ></ComTable>
  </div>
  <Pop ref="popRef" :title="popTitle" width="400px" @confirm="confirm">
    <ComForm ref="editFormRef" :format="editFormat" @selectRange="selectRange">
    </ComForm>
  </Pop>
</template>
<script setup  lang="ts">
import { onMounted, ref, nextTick, h } from "vue";
import { initMap, map } from "@/utils/map";
import { getClearTask, editPatrolTask, delPatrolTask } from "@/api/task/task";
import { ElButton, ElTag } from "element-plus";
import useAppStore from "@/store/modules/app";
import * as mars3d from "mars3d";

const popTitle = ref();
const store = useAppStore();
const { proxy } = getCurrentInstance();
const ishow = ref(true);
const mapRef = ref(null);
const popRef = ref(null);
const editFormRef = ref(null);
//表格相关配置
const tableRef = ref();
let column = ref([
  {
    label: "任务名称",
    prop: "taskName",
  },
  { label: "任务编号", prop: "clearTaskNumber" },
  { label: "执行人", prop: "executePersonName" },
  { label: "工作区域", prop: "workArea" },
  {
    label: "清掏方式",
    prop: "way",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      if (!row.way) {
        return null;
      }
      return h(
        ElTag,
        {
          type: row.way === 1 ? "info" : row.way === 2 ? "success" : "default",
        },
        row.way === 1 ? "人工清淤" : row.way === 2 ? "机器清淤" : ""
      );
    },
  },
  {
    label: "清掏类型",
    prop: "type",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      if (!row.type) {
        return null;
      }
      return h(
        ElTag,
        {
          type:
            row.type === 1 ? "info" : row.type === 2 ? "success" : "default",
        },
        row.type === 1 ? "日常清掏" : row.type === 2 ? "年度清掏" : ""
      );
    },
  },
  {
    label: "等级",
    prop: "grade",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      if (!row.grade) {
        return null;
      }
      return h(
        ElTag,
        {
          type:
            row.grade === 1
              ? "danger"
              : row.grade === 2
              ? "warning"
              : row.grade === 3
              ? "info"
              : row.grade === 4
              ? "success"
              : "",
        },
        row.grade === 1
          ? "紧急"
          : row.grade === 2
          ? "高"
          : row.grade === 3
          ? "中"
          : row.grade === 4
          ? "低"
          : null
      );
    },
  },
  { label: "时间", prop: "startTime" },
  { label: "备注", prop: "remark" },
  {
    label: "操作",
    width: "260px",
    btns: [
      {
        title: "编辑",
        disabled: (data) => (data.status == 1 ? false : true),
        event: "edit",
      },
      {
        title: "工作日志",
        event: "clone",
      },
      {
        title: "删除",
        event: "del",
      },
    ],
  },
]);
const where = ref({});
const edit = (e) => {
  popTitle.value = "编辑任务";
  popRef.value.show(e);
  nextTick(() => {
    editFormRef.value.changeForm({ ...e });
  });
};
const del = (e) => {
  proxy.$modal
    .confirm("是否删除该任务?")
    .then(async () => {
      const res = await delPatrolTask([e.patrolTaskId]);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功!");
      tableRef.value.getData();
    })
    .catch(() => {});
};
const getSelectionRows = () => {
  console.log(tableRef.value.getSelectable());
};
const clone = (e) => {
  popTitle.value = "任务克隆";
  popRef.value.show(e);
  nextTick(() => {
    editFormRef.value.changeForm({ ...e });
  });
};
// 表单相关配置
const format = ref([
  {
    label: "任务名称",
    prop: "taskName",
    type: "input",
    span: 4,
  },
  {
    label: "执行人",
    prop: "executePersonName",
    type: "input",
    span: 4,
  },
  {
    label: "清掏方式",
    prop: "way",
    type: "select",
    option: [
      { label: "人工清淤", value: 1 },
      { label: "机器清淤", value: 2 },
    ],
    span: 4,
  },
  {
    label: "任务等级",
    prop: "grade",
    type: "select",
    option: [
      { label: "紧急", value: 1 },
      { label: "高", value: 2 },
      { label: "中", value: 3 },
      { label: "低", value: 4 },
    ],
    span: 4,
  },
  {
    label: "",
    prop: null,
    type: "button",
    btns: [
      { label: "查询", event: "submit", type: "success" },
      { label: "重置", event: "reset" },
    ],
    span: 4,
  },
  { type: "slot", slotName: "closeBtn", span: 4 },
]);
const formRef = ref(null);
const submit = (data: any) => {
  where.value = { ...data };
};
const reset = (data: any) => {
  formRef.value.reset();
  where.value = {};
};

// 编辑表单配置
const editFormat = ref([
  {
    label: "任务名称",
    prop: "taskName",
    type: "input",
    span: 24,
  },
  {
    label: "巡检人",
    prop: "patrolPersonName",
    type: "input",
    span: 24,
  },
  {
    label: "任务区域",
    prop: "patrolArea",
    type: "input",
    span: 24,
  },
  { label: "查询时间", prop: "patrolTime", type: "date", span: 24 },
  {
    label: "巡检方式",
    prop: "patrolWay",
    type: "select",
    option: [
      { label: "人工巡查", value: 1 },
      { label: "车辆巡检", value: 2 },
      { label: "人工与车辆结合", value: 3 },
    ],
    span: 24,
  },
  {
    label: "备注",
    prop: "remark",
    type: "input",
    span: 24,
  },
  {
    label: "",
    prop: "xxx",
    type: "button",
    btns: [{ label: "选取范围", event: "selectRange", type: "success" }],
    span: 24,
  },
]);
const selectRange = () => {
  popRef.value.hide();
};
const confirm = () => {
  editFormRef.value.checkForm().then(async (result) => {
    if (result) {
      //内部执行提交逻辑
      const res = await editPatrolTask({
        ...editFormRef.value.getFormItem(),
      });
    }
  });
};
const sideClick = (data) => {
  if (data.index == "/mission/clearTask/taskList") ishow.value = true;
};
store.changeSide(sideClick);
const close = () => {
  measureArea();
  ishow.value = false;
};

async function measureArea() {
  const graphic = await measure.area();
}
let measure;
onMounted(() => {
  console.log(2222, "页面中", map);
  measure = new mars3d.thing.Measure({
    label: {
      color: "#ffffff",
      font_family: "楷体",
      font_size: 20,
      background: false,
    },
    isAutoEditing: false,
  });
  console.log(map);
  map.addThing(measure);
});
</script>
<style scoped>
.contain {
  width: 95%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  position: absolute;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  overflow: hidden;
  padding: 20px;
  border-radius: 20px;
}
</style>